<template>
     <Teleport to=".header">
        <Header title="注册"></Header>
    </Teleport>
    <van-steps :active="active" active-icon="circle">
        <van-step>验证手机号</van-step>
        <van-step>验证验证码</van-step>
        <van-step>确认注册</van-step>
        <van-step>完成注册</van-step>
    </van-steps>

    <div v-if="active===0" class="test-tel">
        <van-form @failed="failedHandler" @submit="submitHandler" >
        <van-cell-group inset class="login-form">
            <van-field
            v-model="tel"
            name="手机号"
            placeholder="请输入手机号"
            :rules="[{pattern: /^\d{11}$/, required: true, message: '请填写合适的手机号' }]"
            />
        </van-cell-group>
            <div style="margin: 16px;">
            <van-button round block type="primary" native-type="submit">
            提交
            </van-button>
        </div>
    </van-form>
    </div>
    <div v-if="active===1" class="test-code">
        <van-form @failed="codefailedHandler" >
        <van-cell-group inset class="login-form">
            <van-field
            v-model="code"
            name="验证码"
            placeholder="请输入验证码"
            :rules="[{pattern: /^\d{5}$/, required: true, message: '请填写合适的验证码' }]"
            />
        </van-cell-group>
            <div style="margin: 16px;">
            <van-button  @click="getCodeHandler" round block type="primary" native-type="button" class="submitcode">
            获取验证码
            </van-button>
            <van-button @click="codeHandler" round block type="primary" native-type="submit" class="submitcode">
            下一步
            </van-button>
        </div>
    </van-form>
    </div>
    <div v-if="active===2" class="register-box">
        <van-form @submit="okRegister">
            <van-cell-group inset>
                <van-field
                v-model="tel"
                label="手机号"
                name="手机号"
                placeholder="{{ tel }}"
                readonly="true"
                />
                <van-field
                v-model="password"
                type="password"
                name="密码"
                label="密码"
                placeholder="密码"
                :rules="[{pattern: /^\d{5,16}$/, required: true, message: '请填写密码' }]"
                />
            </van-cell-group>
            <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit">
                确认注册
                </van-button>
            </div>
        </van-form>
    </div>
    <div v-if="active===3" style="text-align: center;" >
        <van-icon name="checked" class="finish-box"/>
        您已完成注册请登录
        <van-button @click="loginHandler" type="success" style="display: block;  margin:10px auto;" >登录</van-button>
    </div>

</template>

<script lang="ts" setup>
import Header from '@/components/header.vue'
import { ref } from 'vue';
import { showSuccessToast, showFailToast } from 'vant';
import { getUserPhone } from '@/apis/userInfo'
import { getcode,sondcode,finishregister } from '@/apis/userInfo'
import { useRouter } from 'vue-router';
const $router = useRouter()
interface resInfo {
    code:string,
    message:string
}
const active =ref<number>(0)
//检验手机号的逻辑
const tel = ref<string>('')

const submitHandler = async()=>{
    const res =await getUserPhone(tel.value)
    console.log(res)
    if((res as unknown as resInfo).code ==='10005'){
        showFailToast((res as unknown as resInfo).message +'\n'+'请去登录页面')
        return

    }
    setTimeout(()=>{
        active.value=1
    },1000)
    showSuccessToast('提交成功') 
}
const failedHandler =()=>{
    showFailToast('请按照要求填写手机号')
}
//检验验证码的逻辑
const code = ref<string>('')
const getCodeHandler = async()=>{
    const res =await getcode(tel.value)
    showSuccessToast('验证码为'+res.data)
    console.log(res)
}
const codefailedHandler=()=>{

}
const codeHandler=async()=>{
    const res = await sondcode(tel.value,code.value)
    console.log(res)
    if(res.code==='10007'){
        showFailToast('验证码错误，请重新输入')
        return
    }
    setTimeout(()=>{
        active.value=2
    },1000)
    showSuccessToast('验证成功') 
}
//确认注册表单逻辑
const password = ref<string>('')
const okRegister=async()=>{
    const res = await finishregister(tel.value,password.value)
    console.log(res)
    setTimeout(()=>{
        active.value=3
    },1000)
    showSuccessToast('注册成功') 
}
//完成
const loginHandler=()=>{
    $router.push('/login')
}
</script>

<style lang="scss" scoped>
.submitcode{
    margin-top: 10px;
  
}
.finish-box{
    text-align: center;
    font-size: 30px;
    color: green;
    display: block;
}
</style>